import {ResultCode} from "../../network.js";
import popupInfo from "../../components/popupInfo.js";
import {repeatString} from "../../utils.js";
import squareButton from "../../components/squareButton.js";
import popupSearch from "../../components/popupSearch.js";
import {searchValueChangeDoing} from "../utils/popupSearchUtils.js";

export default {
    components: {
        'popup-info': popupInfo,
        'popup-search': popupSearch,
        'square-button': squareButton,
    },
    setup(props) {
        const userName = Vue.ref("");
        const userId = Vue.ref("");
        const popup = Vue.ref(null);
        const popupSearch = Vue.ref(null);
        const router = VueRouter.useRouter();
        const route = VueRouter.useRoute();

        function backToIndex() {
            router.push({path: "/"});
        }

        Vue.onMounted(() => {
            axios.get("/user/now")
                .then(response => {
                    const responseResult = response.data;
                    if (responseResult.code === ResultCode.NEED_LOGIN) {
                        popup.value.onConfirm = backToIndex;
                        popup.value.onCancel = backToIndex;
                        popup.value.show(responseResult.message);
                    } else if (responseResult.code === ResultCode.SUCCESS) {
                        const user = responseResult.data;
                        console.log(user);
                        const id = user.id;
                        let idStr;
                        if (id.length < 18) {
                            idStr = id + repeatString("*", 18 - id.length);
                        } else {
                            idStr = id;
                        }
                        // console.log("idStr: " + idStr);
                        // console.log(idStr.substring(0, 3));
                        // console.log(idStr.slice(-3));
                        userId.value = idStr.substring(0, 3) + "****" + idStr.slice(-3);
                        userName.value = user.name;
                    }
                });
        })

        function onExitClick() {
            popup.value.onConfirm = () => {
                axios.get("/user/logout").then(() => {
                    backToIndex();
                });
            };
            popup.value.show("确定退出登录吗？");
        }

        function onBackToIndexClick() {
            backToIndex();
        }

        function searchDisease() {
            popupSearch.value.widthInParent = 80;
            popupSearch.value.heightInParent = 80;
            popupSearch.value.onTextChange = (v) => {
                searchValueChangeDoing(v, "/disease/search", popupSearch,
                    (resultList) => {
                        return (i) => {
                            router.push({
                                path: "/disease/" + resultList[i].id
                            });
                        };
                    });
            };
            popupSearch.value.show("疾病查询");
        }

        function searchHospital() {
            popupSearch.value.widthInParent = 80;
            popupSearch.value.heightInParent = 80;
            popupSearch.value.onTextChange = (v) => {
                searchValueChangeDoing(v, "/hospital/search", popupSearch,
                    (resultList) => {
                        return (i) => {
                            router.push({
                                path: "/user_main/" + resultList[i].id
                            });
                        };
                    });
            };
            popupSearch.value.show("医院选择");
        }

        return {
            userName, userId, popup, router, route,
            onExitClick, popupSearch, searchDisease,
            searchHospital, onBackToIndexClick
        }
    },
    template: `<div class="container" style="height: 100%;">
    <popup-info
            ref="popup"
    ></popup-info>
    <popup-search ref="popupSearch">
    </popup-search>
    <div style="position: fixed;height: 100%;width: 100%;
    background: url('/images/background/user_login.png') no-repeat;background-size: 100% 100%;
    left: 0;top: 0;z-index: -1;
    "></div>
    <square-button background-url="/images/exit_images/exit1.png"
                   :height=80
                   right="5%"
                   bottom="5%"
                   @onClick="onExitClick"
    ></square-button>
    <square-button background-url="/images/user_login/ask.png"
                   :height-in-parent=20
                   right="25%"
                   bottom="15%"
                   @click="router.push('/topic_info/1')"
    ></square-button>
    <square-button background-url="/images/logo.png"
                   :height-in-parent=20
                   left="5%"
                   top="5%"
                   @onClick="onBackToIndexClick"
    ></square-button>
    <div class="row" style="height: 100%;">
        <div class="col-md-6" style="height: 100%">
        </div>
        <div class="col-md-6" style="height: 100%">
            <div style="height: 10%"></div>
            <div class="row">
                <div class="col-md-6">
                    <div class="zcool-font" style="font-size: 24px;">姓名:{{userName}}</div>
                </div>
                <div class="col-md-6">
                    <div class="zcool-font" style="font-size: 24px;">身份证号:{{userId}}</div>
                </div>
            </div>
            <div style="height: 15%"></div>
            <div class="row">
                <div class="col-md-5">
                    <div class="zcool-font" style="font-size: 36px;">
                        疾病查询：
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="zcool-font">
                        <input type="text" class="zcool-font" style="font-size: 30px;display: inline-block;"
                            @click="searchDisease">
                        <div style="width: 100%;position: absolute;">
                        
                        </div>
                    </div>
                </div>
            </div>
            <div style="height: 8%;"></div>
            <div class="row">
                <div class="col-md-5">
                    <div class="zcool-font" style="font-size: 36px;">
                        医院选择：
                    </div>
                </div>
                <div class="col-md-7">
                    <div>
                        <input type="text" class="zcool-font" style="font-size: 30px;"
                            @click="searchHospital">
                    </div>
                </div>
            </div>
            <div class="row pg-empty-placeholder"></div>
            <div class="row">
                <div class="col-md-5">
                </div>
                <div class="col-md-2">
                </div>
                <div class="col-md-4">
                </div>
                <div class="col-md-1">
                </div>
            </div>
        </div>
    </div>
</div>`,

}